<template xmlns="http://www.w3.org/1999/html">
<div>
  <!--  搜索框-->
  <div style="margin:10px auto;width: 700px;padding-right: 100px">
    <el-form v-if="!isResultShow" status-icon :model="certificate" style="text-align: center" ref="userForm" label-width="100px">

      <el-form-item prop="identity" label="身份证号"
                    :rules="[
                      { required: true, message: '请输入身份证号', trigger: 'blur' },
                    ]"
      >
        <el-input size="medium" placeholder="请输入身份证号" prefix-icon="el-icon-collection" v-model="certificate.identity"></el-input>
      </el-form-item>
      <el-form-item prop="certificateNum" label="证书编号"
                    :rules="[
                      { required: true, message: '请输入证书编号', trigger: 'blur' },
                    ]"
      >
        <el-input size="medium"  placeholder="请输入证书编号" prefix-icon="el-icon-notebook-1" v-model="certificate.certificateNum"></el-input>
      </el-form-item>
      <el-form-item style="margin: 10px 0; text-align: center">
        <el-button type="primary" size="medium" style="width: 100%" autocomplete="off" @click="verify">证书验证</el-button>
      </el-form-item>
    </el-form>

  </div>
  <div v-if="isResultShow" style="text-align: center;padding-right: 200px">
    <div v-if="success">
      <div style="display: inline-block;font-size: 25px">
        验证结果:&nbsp&nbsp
      </div>

      <div style="display: inline-block;background-color: #67C23A;font-size: 30px;border-radius: 6px;padding: 2px 6px">
        <i class="el-icon-circle-check"></i> 验证成功
      </div>
      <div style="padding-left: 25%;padding-top: 20px">
        <el-card style="width: 600px;">
          <el-form label-width="100px" size="small">
            <el-form-item label="姓名" >
              <el-input v-model="certificate.name" disabled autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" >
              <el-input v-model="certificate.sex" disabled autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" >
              <el-input v-model="certificate.identity" disabled autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="发布机构" >
              <el-input v-model="certificate.issuedBy" disabled autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="证书名称" >
              <el-input v-model="certificate.certificateName" disabled autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="证书编号" >
              <el-input v-model="certificate.certificateNum" disabled autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="证书级别" >
              <el-input v-model="certificate.certificateLevel" disabled autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="证书颁发日期" style="text-align: left" >
              <el-date-picker
                  disabled
                  v-model="certificate.certificateTime"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item style="margin: 10px 0; text-align: left">
              <el-button  type="primary" @click="isResultShow=false;certificate={}">返 回</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>
    <div v-if="!success">
      <div style="display: inline-block;font-size: 25px">
        验证结果:&nbsp&nbsp
      </div>

      <div style="display: inline-block;background-color: #F56C6C;font-size: 30px;border-radius: 6px;padding: 2px 6px">
        <i class="el-icon-circle-close"></i> 验证失败
      </div>
      <div style="padding: 50px; font-size: 25px; color: #F56C6C;font-family: '宋体',serif;">
        很抱歉，未查询到对应证书！<br><br>
        证书不存在或正在审核中
      </div>
      <el-button  @click="isResultShow=false;certificate={}" style="font-size: 20px" type="primary">返回</el-button>
    </div>


  </div>
</div>
</template>

<script>
import {setRoutes} from "@/router";
import * as fecha from "element-ui/lib/utils/date";

export default {
  name: "CertificateSearch",
  data(){
    return{
      //表单数据
      certificate:{
        name:'',
        sex:'',
        identity:'',
        issuedBy:'',
        certificateName:'',
        certificateNum:'',
        certificateLevel:''
      },
      //是否显示验证结果
      isResultShow:false,
      //验证成功或失败
      success:false
    }
  },
  methods:{
    verify(){
      this.$refs['userForm'].validate((valid) => {
        if (valid) { //表单校验合法
          this.request.get("/certificates/verify",{
            params:{
              pageNum:1,
              pageSize:1,

              identity:this.certificate.identity,
              certificateNum:this.certificate.certificateNum,
              state: 'pass',
            }
          }).then(res =>{
            console.log(res.data) //返回Result对象  res中的data为Page对象
            if(res.data===null){//没有数据 查询失败
              this.success=false;
              this.isResultShow=true;
            }else {  //查询成功
              this.certificate=res.data
              this.success=true;
              this.isResultShow=true;
            }
          })
        }
      });
    },
    //日期格式化
    dateFormat(row,column,cellValue){
      return cellValue ? fecha.format(new Date(cellValue),'yyyy-MM-dd'):'';
    },
  }
}
</script>

<style scoped>

</style>